<%@page import="java.util.*"%>
<%@page import="java.text.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
    String path = request.getContextPath(); 
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+path+ "/"; 
%>
<!DOCTYPE HTML>
<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>版本添加</title>
	<link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	<link type="text/css" rel="stylesheet" href="plugin/bootstrap-fileinput/css/fileinput.css" />
<style type="text/css">

ul{
    list-style-type: none;
}
 .breadcrumb{
          padding: 21px 25px;
       }  
 a {
    color: #2a3f54;
}     
table{
   width:800px;
}   
td{
  width:400px;
}
.u-fileInput {
	width: 240px;
	height: 160px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	padding-left: 10px;
	opacity: 0; //
	透明度为0 filter: alpha(opacity = 0);; //
	透明度为0，兼容IE8 cursor: pointer;
}

//
add-img图标
  .u-add-img-icon {
	width: 74px;
	height: 61px;
	/*    background: url() no-repeat;  */
	display: inline-block;
	vertical-align: middle;
}

#fileImg {
	width: 240px;
	height: 160px;
}
#dt {
	margin: 30px auto;
	height: 28px;
	width: 200px;
	padding: 0 6px;
	border: 1px solid #ccc;
	outline: none;
}

#confirm {
	width: 250px;
	height: 40px;
	margin-left: 15%;
	margin-top: 40px;
	text-align: center;
}

.imgitem {
	width: 240px;
	height: 160px;
	display: inline-block;
	border: 1px #d5d4d4 dotted;
	text-align: center;
	line-height: 160px;
	position: relative;
	//
	相对定位
}
</style>

</head>
<body>
<div class="row base-margin" id="query">
        <ul class="breadcrumb">
				<li style="padding-left: 15px"><i class="icon-home home-icon"></i> <a href="javascript:void(0)">System Settings(系统设置)</a>
				</li>
				<li class="active">
				<a href="view/sys/version_update.jsp">Version update(版本更新)</a></li>
        </ul>
    </div>
     	<form id='addForm'>
		<div class="form-horizontal" role="form" >
			<div class="form-group">
				<label for="firstname" class="col-sm-2 control-label">Name(版本名称)</label>
				<div class="col-sm-3">
					<input type="text"  name='name' class="form-control"  id='name' />
				</div>
			</div>
			<div class="form-group">
				<label for="firstname" class="col-sm-2 control-label">Version(版本号)</label>
				<div class="col-sm-3">
					<input type="text"  name='version' class="form-control"  id='version' />
				</div>
			</div>
			<div class="form-group">
				<label for="firstname" class="col-sm-2 control-label">Version Instructions(版本描述)</label>
				<div class="col-sm-3">
					<textarea rows="8" cols="30" name="versionIntroduction"></textarea>
				</div>
			</div>
			<div class="form-group">
				<label for="firstname" class="col-sm-2 control-label">File(apk文件)</label>
				<div class="col-sm-3">
					<input id="input-21" type="file"    class="file-loading"/>
				    <input type="hidden"  id="imgId" />
				</div>
			</div>
			<div class="form-group" style="padding-left: 35%">
				<button  onclick="return save()" class="btn btn-info"
					style="width: 200px">Save</button>
			</div>
			</div>
    </form>
</body>
	<!-- 加载需要的js -->
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script src="plugin/bootstrap-table/dist/bootstrap-table.min.js"></script>
	<script src="plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
		 <!-- 上传文件 -->
    <script type="text/javascript"  src="plugin/bootstrap-fileinput/js/fileinput.min.js" ></script>
    <script src="plugin/bootstrap-fileinput/js/plugins/canvas-to-blob.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.1/js/fileinput_locale_zh.js"></script>
	<script src="js/common.js"></script>
	<script src="plugin/layer/layer.js"></script>
	<script type="text/javascript" charset="utf-8">
	function save(){
		var data= serialize('addForm');
		var imgId=$('#imgId').val();
		if(data.name==""){
			layer.alert(" Name cannot be empty");
			return;
		}
		data.androidUrl=imgId;
		if(data.androidUrl==""){
			layer.alert("File cannot be empty");
			return;
		}
		$.ajax({
			type:"post",
			url:"edition/addOrUpdate",
			data: JSON.stringify(data),
	        contentType:"application/json;charset=UTF-8", 
	        dataType:"json",
	        async:false,
			success:function(data){
				if(data.code!=200){
					layer.msg(data.msg);
				}else{
					window.location.href="view/sys/version_update.jsp";
				}
				
			}
		});
	}
	 $(function(){
		 initPath('<%=basePath%>');
		 initFileInput("input-21");	
			})
	</script>
</html>